<template>
  <!--  地址管理  新增收货地址结构  -->
  <div class="address-dialog">
    <el-form ref="addressForm" :model="addressForm" :rules="rules" label-width="80px">
      <el-form-item label="收件人" prop="name">
        <el-input v-model="addressForm.name" placeholder="请输入姓名" maxlength="10" type="text" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="addressForm.phone" placeholder="请输入手机号码" maxlength="11" type="text" />
      </el-form-item>
      <el-form-item label="地区选择" prop="city">
        <el-cascader
          v-model="addressForm.addressAll"
          class="el-cascader-class"
          :props="{ label: 'name' }"
          :options="ProvinceDataArray"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="addressForm.address" type="textarea" maxlength="150" :autosize="{ minRows: 4, maxRows: 8 }" resize="none" :show-word-limit="true" placeholder="请输入地址" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addressSubmit('addressForm')">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  props: {
  },
  data() {
    var setPhone = (rule, value, callback) => {
      var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (value === '') {
        callback(new Error('请输入手机号码'))
      } else {
        if (!myreg.test(this.addressForm.phone)) {
          callback(new Error('手机号码格式不正确!'))
        }
        callback()
      }
    }
    return {
      addressForm: {
        name: '',
        phone: '',
        province: '',
        city: '',
        county: '',
        address: '',
        addressAll: []
      },
      ProvinceDataArray: [],
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        phone: [{ validator: setPhone, required: true, trigger: 'change' }],
        city: [{ required: true, message: '请选择省市区', trigger: 'change' }],
        address: [{ required: true, message: '请输入地址', trigger: 'change' }]
      }
    }
  },
  methods: {
   
    handleChange(obj) {
      this.addressForm['province'] = obj[0]
      this.addressForm['city'] = obj[1]
      this.addressForm['county'] = obj[2]
    },
    addressSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const currentObj = {
            'provinceCode': this.addressForm.province, // 省  必填
            'cityCode': this.addressForm.city, // 市   必填
            'areaCode': this.addressForm.county, // 区/县   必填   (省/市/区必填,实际场景未必一定是  xx省xx市xx区,至少按  provinceCode,cityCode, areaCode三个参数填写完就可以了  )
            'streetCode': '', // 镇/街道 (选填,不是直辖市一般都是需要填写)
            'detailAddress': this.addressForm.address, // 必填 详细的村或者小区地址
            'contactName': this.addressForm.name, // 收件人  必填
            'contactPhone': this.addressForm.phone // 收件人电话号码  必填
          }
          var tipName = '新增地址成功!'
          if (this.$parent.$parent.addressTitle === '编辑收货地址') {
            currentObj['uuid'] = this.$parent.$parent.currentAddressUUid
            tipName = '地址更改成功'
          }
          editAddress(JSON.stringify(currentObj)).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: tipName
              })
              this.$parent.$parent.getAddress()
              this.$emit('addressSubmit')
            }
          })
          this.$parent.$parent.dialogFormVisible = false
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .address-dialog {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:30px 50px 30px 30px;
    box-sizing: border-box;
    .el-form {
      width: 100%;
    }
  }
  /deep/ .address-dialog{
    .el-input--mini {
      .el-input__inner {
        height:36px;
        line-height:36px;
      }
    }
    .el-button--mini, .el-button--mini.is-round {
      width: 140px;
      height: 40px;
      font-size: 16px;
    }
    .el-cascader {
      width:100%;
    }
  }
</style>
